<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
<!--表格 -->
<table class="layui-hide" id="ID-treeTable-demo" lay-filter="TD-manage" ></table>

<!--表格列“操作”里的按钮 -->
<script type="text/html" id="barManage">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-danger" lay-event="del" id="del">删除</a>
    <a class="layui-btn layui-btn-warm" lay-event="change-password" id="change-password">修改密码</a>
    <a class="layui-btn layui-btn-warm" lay-event="modify-ou" id="modify-ou">修改部门</a>
  </div>
</script>

<div id="delUser" style="display: none"></div>

<div id="changePassword" class="changePassword" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password" name="password"  lay-verify="required" class="layui-input">
        </div>
    </div>

  <div class="layui-inline">
	<label class="layui-form-label">确认密码</label>
	<div class="layui-input-inline">
	  <input type="password" id="password1" lay-verify="required|confirmPass" class="layui-input">
	</div>
  </div>
</div>

<div id="modifyOu" class="modifyOu" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">选择部门</label>

        <div class="layui-input-inline">
          <input type="text" id="new_ou" name="new_ou"  lay-verify="required" class="layui-input">
            <table class="layui-hide" id="ID-treeTable-demo1" lay-filter="TD-manage" ></table>
        </div>

    </div>

</div>

<!--表格列“操作”里的按钮 -->
<script type="text/html" id="barManage1">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-danger" lay-event="modify" id="modify">确定</a>
  </div>
</script>



<script>
    // 初始化执行函数
    $(function (){initTable();});
    // 初始化表格
    function initTable(){
        layui.use(function (){
            let table = layui.table;
            // 执行生成
            var inst = table.render({
                elem: '#ID-treeTable-demo',     // 引用名称 table标签里引用
                id: 'tableId',  // 表格id索引
                url: '/data_users', // 此处为静态模拟数据，实际使用时需换成真实接口
                method: 'post',     // 访问方法
                {#toolbar: '#TPL-treeTable-demo',  // 上方工具栏的引用名称，暂未使用，先注释掉#}
                cols: [[    // 定义表格的列
                    {type: 'numbers', title: '序号',fixed: 'left'},   // 自带的序号
                    {field: 'username', title: '用户名', width: 180},     // 使用field的值从data里取值，tittle是表格的表头名
                    {field: 'dn', title: 'DN', width: 380},
                    {title: '操作', width: 300,toolbar: '#barManage'} // toolbar在id="barManage"的script标签里引用
                ]],
                page: true, // 是否分页
                parseData: function(res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    }
                },
                done: function (res, current, count){
                    $('thead tr').css({'background-color': '#8E236B', 'color': 'white' })
                }
            });
            table.on('tool(TD-manage)', function(obj){
                var oneLineData = obj.data;
                if(obj.event==='del'){
                    // 删除用户的功能函数
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '警告：删除后无法恢复！请点击“确认”删除',
                            {#area: ['500px', '400px'],#}
                            btn: ['确定','取消'],
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#delUser'),
                            btn1: function (layero,index){
                                $.ajax({
                                    url:'/delete_user',
                                    type:'post',
                                    data:{
                                        dn: oneLineData.dn
                                    },
                                    {#dataType:'json',#}
                                    success:function (res){
                                        console.log(res);
                                        if(res.code === 1){
                                            alert(res.msg);
                                            layer.closeAll();
                                            table.reloadData('tableId') // 重载表格数据
                                        }
                                        else if(res.code === 2){
                                            alert(res.msg);
                                            layer.closeAll();
                                            table.reloadData('tableId') // 重载表格数据
                                        }
                                    },
                                })
                            },
                        })
                    })
                }
                else if(obj.event==='change-password'){
                    // 添加子部门的方法函数
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '修改密码',
                            area: ['400px', '253px'],
                            btn: ['确定','取消'],
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#changePassword'),
                            btn1: function (layero,index){
                                if ($('#password').val()===$('#password1').val()){
                                    $.ajax({
                                        url:'/change_password',
                                        type:'post',
                                        data:{
                                            password:$('#password').val(),
                                            dn:oneLineData.dn
                                        },
                                        success:function (res){
                                            console.log(res);
                                            if(res.code === 1){
                                                alert(res.msg);
                                                layer.closeAll();
                                                table.reloadData('tableId') // 重载表格数据
                                            }
                                            else if(res.code === 2){alert(res.msg)}
                                        }
                                    })
                                }
                                else if($('#password').val()!=$('#password1').val()){alert('密码不一致')}
                            },
                            end:function (layero,index){
                                document.getElementById("changePassword").setAttribute('style','display: none');
                            },
                        })
                    })
                }
                else if(obj.event==='modify-ou'){
                    // 添加子部门的方法函数
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '修改部门：'+oneLineData.username,
                            {#area: ['400px', '253px'],#}
                            {#btn: ['确定','取消'],#}
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#modifyOu'),
                            btn1: function (layero,index){
                                    $.ajax({
                                        url:'/modify_ou',
                                        type:'post',
                                        data:{
                                            cn:oneLineData.username,
                                            new_ou:$('#new_ou').val(),
                                            old_ou:oneLineData.dn
                                        },
                                        success:function (res){
                                            console.log(res);
                                            if(res.code === 1){
                                                alert(res.msg);
                                                layer.closeAll();
                                                table.reloadData('tableId') // 重载表格数据
                                            }
                                            else if(res.code === 2){alert(res.msg)}
                                        }
                                    })
                            },
                            end:function (layero,index){
                                document.getElementById("modifyOu").setAttribute('style','display: none');
                            },
                        })
                    })
                }
            });
        })
    }
</script>

</body>
</html>